﻿@page "/datagrid-column-template"
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using System.Linq 
@inject NorthwindContext dbContext
@inject DialogService DialogService

<h1>DataGrid <strong>Column Template</strong></h1>

<p>The <strong>Template</strong> allows you to customize the way data is displayed.</p>

<p>Common uses: Record numbering, displaying an image depending on property value, 
    displaying multiple properties in the same column, linking to other pages,
    data formatting and HTML embedding.
</p>

<RadzenExample Name="DataGridColumnTemplate" Heading="false" Documentation="false">
<RadzenDataGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" 
            Data="@orders" TItem="Order">
    <Columns>
        <RadzenDataGridColumn Width="50px" TItem="Order" Title="#" Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
            <Template Context="data">
                @(orders.IndexOf(data) + 1)
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID">
            <Template Context="data">
                <RadzenButton ButtonStyle="ButtonStyle.Info" Icon="help" Click=@(() => OpenOrder(data.OrderID)) Text="@data.OrderID.ToString()" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
        <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
            <Template Context="order">
                <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                @order.Employee?.FirstName @order.Employee?.LastName
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
            <Template Context="order">
                @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="ShipCountry" />
    </Columns>
</RadzenDataGrid>
</RadzenExample>

@code {
    RadzenDataGrid<Order> ordersGrid;
    IList<Order> orders;

    async Task OpenOrder(int orderId)
    {
         await DialogService.OpenAsync<DialogCardPage>($"Order {orderId}",
               new Dictionary<string, object>() { { "OrderID", orderId } },
               new DialogOptions() { Width = "700px", Height = "530px" });
    }

    protected override void OnInitialized()
    {
        orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
    }
}
